<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Amaze UI Admin index Examples</title>
        <meta name="description" content="这是一个 index 页面">
        <meta name="keywords" content="index">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="renderer" content="webkit">
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <link rel="icon" type="image/png" href="assets/i/favicon.png">
        <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
        <meta name="apple-mobile-web-app-title" content="Amaze UI" />
        <script src="assets/js/echarts.min.js"></script>
        <link rel="stylesheet" href="assets/css/amazeui.min.css" />
        <link rel="stylesheet" href="assets/css/amazeui.datatables.min.css" />
        <link rel="stylesheet" href="assets/css/app.css">
        <script src="assets/js/jquery.min.js"></script>
        <!-- 日历组件引用 -->
        <link href="assets/timepicker/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="assets/timepicker/font-awesome.min.css" />
        <link rel="stylesheet" type="text/css" media="all" href="assets/timepicker/daterangepicker-bs3.css" />
        <script type="text/javascript" src=assets/js/bootstrap.min.js></script>
        <script type="text/javascript" src="assets/timepicker/moment.js"></script>
        <script type="text/javascript" src="assets/timepicker/daterangepicker.js"></script>
        <link rel="stylesheet" href="assets/css/index/user.css" />
    </head>
    <body data-type="user-active">
        <script src="assets/js/theme.js"></script>
        <div class="am-g tpl-g">
            <!-- 用户活跃度-内容区域 -->
            <div class="tpl-content-wrapper">
                <div class="container-fluid am-cf">
                    <div class="row">
                        <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                            <div id="page-title" class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span> 趋势分析</div>
                        </div>
                    </div>
                </div>

                <div class="row-content am-cf">
                    <div id="select-panel" class="am-panel am-panel-primary">
                          <div class="am-panel-hd">
                            <h3 style="display:inline-block;" class="am-panel-title">高级筛选</h3>
                            <i id="fixed_icon_3" style="float:right;">&nbsp;</i>
                          </div>
                          <ul class="am-list am-list-static" id="panel_content_3">
                            <li class="select-list">
                                <span class="select-list-title">时间筛选</span>
                                <span class="select-list-content">
                                    <form action="" class="am-form am-form-inline">
                                        <div class="am-form-group am-form-icon">
                                            <i class="am-icon-calendar"></i>
                                            <input id="reservation" type="text" class="am-form-field" placeholder="日期" value="2017-05-21 - 2017-06-09">
                                        </div>
                                    </form>
                                </span>
                            </li>
                            <li class="select-list">
                                <span class="select-list-title">渠道筛选</span>
                                <span class="select-list-content">
                                    <ul id="channel">
                                        <li class="select-active select-list-first">全部</li>
                                        <li>IOS</li>
                                        <li>Android</li>
                                        <li>笔记本电脑</li>
                                    </ul>
                                </span>
                            </li>
                            <li class="select-list">
                                <span class="select-list-title">指标筛选</span>
                                <span class="select-list-content">
                                    <ul id="indicator">
                                        <li class="select-list-first">新用户</li>
                                        <li class="select-active">新用户占比</li>
                                        <li>老用户</li>
                                        <li>老用户占比</li>
                                        <li>启动用户</li>
                                        <li>启动次数</li>
                                    </ul>
                                </span>
                            </li>
                          </ul>
                    </div>
                    
                    <div id="summary" class="section">
                        <table class="am-table am-table-bordered am-primary">
                            <thead>
                                <tr>
                                    <td class="am-text-center">新用户</td>
                                    <td class="am-text-center">新用户占比</td>
                                    <td class="am-text-center">启动用户</td>
                                    <td class="am-text-center">启动次数</td>
                                    <td class="am-text-center">每次使用时长</td>
                                    <td class="am-text-center">每人使用时长</td>
                                </tr>
                            </thead>
                            <tbody class="summary-list">
                                <tr>
                                    <td class="am-text-center">1284</td>
                                    <td class="am-text-center">46.84%</td>
                                    <td class="am-text-center">2640</td>
                                    <td class="am-text-center">10055</td>
                                    <td class="am-text-center">00:02:30</td>
                                    <td class="am-text-center">00:09:32</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                            <div class="widget-title am-fl">趋势分析</div>
                            <div class="widget-function am-fr">
                                <a href="javascript:;" class="am-icon-cog"></a>
                            </div>
                        </div>
                        <div class="widget-body-md widget-body tpl-amendment-echarts am-fr" id="tpl-echarts"></div>
                    </div>

                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                        <div class="widget-title am-fl">详情列表</div>
                            <div class="widget-function am-fr">
                                <a href="javascript:;" class="am-icon-download" style="color:#0e90d2;">导出文件</a>
                            </div>
                        </div>
                        <div class="widget-body am-fr">
                            <table class="am-table">
                                <thead>
                                    <tr class="am-primary">
                                        <th class="am-text-center">日期</th>
                                        <th class="am-text-center">启动用户</th>
                                        <th class="am-text-center">日活/月活</th>
                                        <th class="am-text-center">周活跃用户</th>
                                        <th class="am-text-center">月活跃用户</th>
                                        <th class="am-text-center">月沉默用户用户</th>
                                        <th class="am-text-center">累计启动用户</th>
                                    </tr>
                                </thead>
                                <tbody id="active-data"></tbody>
                            </table>

                            <ul id="paging" class="page">
                            </ul>
                        </div>
                    </div>
            </div>
        </div> 
        </div>

        <script src="assets/js/com.js"></script>
        <script src="assets/js/indexjs/user-active.js"></script>
        <script>
            // 分页组件引用
            $("#paging").initPage(100,1);
            // 日历组件引用
            $(document).ready(function() {
                $('#reservation').daterangepicker(null, function(start, end, label) {
                    console.log(start.toISOString(), end.toISOString(), label);
                });
            });
            httpRequest.filterUrl("user-active");
            panelFold.init({"el":"#fixed_icon_3","obj":"#panel_content_3"});


        </script>
        
    </body>
</html>